<template>
  <div>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="80%">
      <el-row :gutter="15">
        <div>
          <el-form :model="form" label-position="top">
            <el-col :span="10">
              <el-form-item label="策略名称" label-width="120px">
                <el-input v-model="form.name" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-tabs
                v-model="activeName"
                type="border-card"
                @tab-click="handleClick"
              >
                <el-tab-pane
                  :label="item.label"
                  :name="item.id"
                  v-for="item in tabsList"
                  :key="item.id"
                >
                  <el-button >新增定时计划</el-button>
                  <el-table
                    :data="form.tableData"
                    style="width: 100%; margin-top: 20px"
                  >
                    <el-table-column label="定时计划" min-width="500">
                      <template slot-scope="scope">
                        <el-col :span="12">
                          <el-form-item class="mb-0">
                            <el-time-picker
                              v-model="scope.row.date[0]"
                              :picker-options="{
                                selectableRange: '18:30:00 - 20:30:00',
                              }"
                              placeholder="任意时间点"
                            />
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item class="mb-0">
                            <el-time-picker
                              v-model="scope.row.date[1]"
                              :picker-options="{
                                selectableRange: '18:30:00 - 20:30:00',
                              }"
                              placeholder="任意时间点"
                            />
                          </el-form-item>
                        </el-col>
                      </template>
                    </el-table-column>
                    <el-table-column label="组合方式" min-width="400">
                      <template slot-scope="scope">
                        <el-col :span="12">
                          <el-form-item class="mb-0">
                            <el-select
                              v-model="scope.row.name"
                              multiple
                              collapse-tags
                              placeholder="请选择组合方式"
                            >
                              <el-option
                                :label="item.label"
                                :value="item.value"
                                v-for="item in combinationModeList"
                                :key="item.value"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                        <el-col :span="12">
                          <el-form-item class="mb-0">
                            <el-select
                              v-model="scope.row.name"
                              multiple
                              collapse-tags
                              placeholder="请选择组合方式"
                            >
                              <el-option
                                :label="item.label"
                                :value="item.value"
                                v-for="item in combinationModeList"
                                :key="item.value"
                              ></el-option>
                            </el-select>
                          </el-form-item>
                        </el-col>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200">
                      <template slot-scope="scope">
                        <el-popconfirm
                          title="确定删除吗？"
                          @confirm="handleDelete(scope.$index, scope.row)"
                        >
                          <el-button
                            slot="reference"
                            size="mini"
                            type="danger"
                            plain
                          >
                            删除
                          </el-button>
                        </el-popconfirm>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-tab-pane>
              </el-tabs>
            </el-col>
          </el-form>
        </div>
      </el-row>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addInfo"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { addPassStrategyApi } from "@/api/intelligent";
export default {
  name: "MvCloudgateTerminalAccessDialog",

  data() {
    return {
      dialogVisible: false,
      tabsList: [
        {
          label: "工作日",
          id: "1",
        },
        {
          label: "休息日",
          id: "2",
        },
        {
          label: "特殊类型",
          id: "3",
        },
      ],
      combinationModeList: [
        {
          label: "人脸",
          value: 1,
        },
        {
          label: "掌静脉",
          value: 2,
        },
        {
          label: "通行卡",
          value: 3,
        },
        {
          label: "密码",
          value: 4,
        },
      ],
      title: "",
      form: {
        name: "",
        tableData: [
          {
            date: [
              new Date(2016, 9, 10, 18, 40),
              new Date(2016, 9, 10, 18, 40),
            ],
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄",
          },
          //   {
          //     date: "2016-05-04",
          //     name: "王小虎",
          //     address: "上海市普陀区金沙江路 1517 弄",
          //   },
          //   {
          //     date: "2016-05-01",
          //     name: "王小虎",
          //     address: "上海市普陀区金沙江路 1519 弄",
          //   },
          //   {
          //     date: "2016-05-03",
          //     name: "王小虎",
          //     address: "上海市普陀区金沙江路 1516 弄",
          //   },
        ],
      },
      activeName: "1",
      form:{
        "normalStrategy": [
          {
          "endTime": "15:33:44",
          "startTime": "14:34:43",
          "trafficRuleDetailsId": "TD202211251434159896525499170811",
          "trafficRuleId": "TR202211251433514118692242319313",
          "trafficRuleType": "1",
          "trafficType": [1,2]
          },
        ],
        "strategyName": "007"
      }
    };
  },

  mounted() {},

  methods: {
    reset() {},
    add() {
      this.dialogVisible = true;
      this.title = "添加";
    },
    edit(params) {
      this.dialogVisible = true;
      this.title = "修改";
    },
    handleClick() {},
    handleDelete(index, row) {
      console.log(index, row);
    },
    addInfo () {

      addPassStrategyApi(this.form).then(res => {

      }).catch(err => {
        this.dialogVisible = false;
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.mb-0 {
  margin-bottom: 0;
}
</style>
